<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="UTF-8" />
		<title>JavaScript内置对象</title>
	</head>
	<style type="text/css">
		* {
			padding: 0px;
			margin: 0px;
		}

		#big {
			background-image: url(http://a3.qpic.cn/psb?/V11OOyBa27S1Km/uA.YwFZafqwXdueQIfhEBtCXFAN.Q8zlSyWkIsyX7hM!/b/dB8BAAAAAAAA&bo=rQOAAgAAAAAFBwg!&rf=viewer_4);
			background-repeat: repeat-x;
			background-size: 80%;
			background-attachment: fixed;
			position: fixed;
			width: 100%;
			height: 100%;
			z-index: -1;
			opacity: 0.5;
		}

		pre {
			font-size: 16px;
			font-weight: bolder;
			font-family: "微软雅黑";
		}

		#box {
			width: 1400px;
			height: 100%;
			margin: auto;
			padding-top: 50px;
		}

		#dh {
			width: 200px;
			height: 80%;
			background: rgba(225, 226, 230, 0.6);
			position: fixed;
			float: left;
			margin-top: 40px;
			font-size: 25px;
		}

		a {
			text-decoration: none;
		}
	</style>

	<body>
		<div id="big">
		</div>
		<div id="dh">
			<a href="index.html">目录</a><br />
			<a href="zxw.html" style="font-size: 18px;">一、工具使用</a><br />
			<a href="gf.html" style="font-size: 18px;">二、WEB前端开发规范</a>
			<a href="3.html" style="font-size: 18px;">三、JavaScript内置对象</a>
			<a href="4.html" style="font-size: 18px;">四、JS内置对象(二)</a>
      <a href="5.html" style="font-size: 18px;">五、冒泡流和捕获流</a>
	  <a href="6.html" style="font-size: 18px;">六、总结,万年历实例</a>
		</div>
		<div id="box">
			<h1>冒泡流,捕获流,验证码获取,多彩时间</h1><br />
			<h3>一、事件冒泡流</h3><br />
			<h4 style="text-indent: 2em;">1、事件冒泡的声明</h4><br />
			<h4 style="text-indent: 4em;">微软提出了名为事件冒泡(event bubbling)的事件流。事件冒泡可以形象地比喻为把一颗石头投入水中，
        泡泡会一直从水底冒出水面。也就是说，事件会从最内层的元素开始发生，一直向上传播，直到document对象。
        因此上面的例子在事件冒泡的概念下发生click事件的顺序应该是p -> div -> body -> html -> document.当你使用事件冒泡时，子级元素先触发，父级元素后触发，即p先触发，div后触
        发。</h4><br />

			<h3>二、事件捕获</h3><br />
			<h4 style="text-indent: 2em;">1、事件捕获声明</h4><br />
			<h4 style="text-indent: 4em;">网景提出另一种事件流名为事件捕获(event capturing)。与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素。
      上面的例子在事件捕获的概念下发生click事件的顺序应该是document -> html -> body -> div -> p.  当你使用事件捕获时，父级元素先触发，子级元素后触发，即div先触发，p后触发。
      </h4><br />
      <h3>三、W3C模型</h3><br />
      <h4 style="text-indent: 4em;">W3C模型是将两者进行中和，在W3C模型中，任何事件发生时，先从顶层开始进行事件捕获，直到事件触发到达了事件源元素。然后，再从事件源往上进行
        事件冒泡，直到到达document。</h4><br />
      <h4 style="text-indent: 4em;">程序员可以自己选择绑定事件时采用事件捕获还是事件冒泡，方法就是绑定事件时通过addEventListener函数，它有三个参数，第三个参数若是true，则表示采用事件捕获，若是false，则表示采用事件冒泡。</h4><br />
      <h4 style="text-indent: 4em;">ele.addEventListener('click',doSomething2,true)
       true=捕获
       false=冒泡</h4><br />
      <h4 style="text-indent: 2em;">2、图例：</h4><br />
      <img src="http://files.jb51.net/file_images/article/201310/20131028160201571.jpg"><br/>

      <h3>四:验证码获取</h3><br />
      <h4 style="text-indent: 2em;">方法1</h4><br />
      <img src="http://a3.qpic.cn/psb?/V11OOyBa27S1Km/ZFysv.DqToxBVwVbl1qaxi7YTjDI3u1cus8vO9bySvU!/b/dN0AAAAAAAAA&bo=TwNaAgAAAAADADE!&rf=viewer_4" alt="" />
      <h4 style="text-indent: 2em;">方法2</h4><br />
      <img src="http://a3.qpic.cn/psb?/V11OOyBa27S1Km/EsKLBCYX*jQ3c2sPpor9FcI46saKTDZtQypYtU1F8LE!/b/dAoBAAAAAAAA&bo=9QKAAgAAAAADAFA!&rf=viewer_4" alt="" />
      <h4 style="text-indent: 2em;">结果</h4><br />
      <button id="btn">获取手机验证码</button>
      <script type="text/javascript">
      var btn=document.getElementById('btn');
      btn.addEventListener("click",clickHandler,false);
      var t=5;

      function clickHandler() {
        btn.innerHTML=t+"秒后重新获取";
        btn.disabled=true;
        siv1=window.setInterval(updateTime,1000);
      }

      function updateTime(){
        t--;
        btn.innerHTML=t+"秒后重新获取";
        if (t<=0) {
          if(siv1)clearInterval(siv1);
          t=5;
          btn.innerHTML="获取手机验证码";
          btn.disabled=false;
        }
      }
      </script>
		</div>
	</body>

</html>
